<template>
  <div class="swiper-container" ref="swiperContainer" :style="{width: panelWight -20 +'px',height:wrapperHeight+'px'}">
    <div class="swiper-wrapper">
      <div class="swiper-slide" >
        <div class="img" >
          <echart2_1  ref="echart2_1"  class="chart" v-if="dataList2[0].mapMarksRankings.length > 0"></echart2_1>
          <div class="no-data" v-else>
            <img src="../../../assets/images/no-data.png" alt="">
            <p>暂无数据</p>
          </div>
        </div>
        <p class="titleRank">{{dataList2[0].categoryName}}</p>
      </div>
      <div class="swiper-slide" >
        <div class="img" >
          <echart2_2  ref="echart2_2"  class="chart" v-if="dataList2[1].mapMarksRankings.length > 0"></echart2_2>
          <div class="no-data" v-else>
            <img src="../../../assets/images/no-data.png" alt="">
            <p>暂无数据</p>
          </div>
        </div>
        <p class="titleRank">{{dataList2[1].categoryName}}</p>
      </div>
      <div class="swiper-slide" >
        <div class="img">
          <echart2_3  ref="echart2_3"   class="chart" v-if="dataList2[2].mapMarksRankings.length > 0"></echart2_3>
          <div class="no-data" v-else>
            <img src="../../../assets/images/no-data.png" alt="">
            <p>暂无数据</p>
          </div>
        </div>
        <p class="titleRank">{{dataList2[2].categoryName}}</p>
      </div>
      <div class="swiper-slide" >
        <div class="img">
          <echart2_4  ref="echart2_4"   class="chart" v-if="dataList2[3].mapMarksRankings.length > 0"></echart2_4>
          <div class="no-data" v-else>
            <img src="../../../assets/images/no-data.png" alt="">
            <p>暂无数据</p>
          </div>
        </div>
        <p class="titleRank">{{dataList2[3].categoryName}}</p>
      </div>
      <div class="swiper-slide" >
        <div class="img">
          <echart2_5  ref="echart2_5" :dataList2="dataList2" v-if="dataList2[4].mapMarksRankings.length > 0"  class="chart"></echart2_5>
          <div class="no-data" v-else>
            <img src="../../../assets/images/no-data.png" alt="">
            <p>暂无数据</p>
          </div>
        </div>
        <p class="titleRank">{{dataList2[4].categoryName}}</p>
      </div>
    </div>
    <div class="swiper-button-prev" />
    <div class="swiper-button-next" />
  </div>
</template>

<script>
import Swiper from 'swiper'
import echart2_1 from '../../echarts/echart2/index1'
import echart2_2 from '../../echarts/echart2/index2'
import echart2_3 from '../../echarts/echart2/index3'
import echart2_4 from '../../echarts/echart2/index4'
import echart2_5 from '../../echarts/echart2/index5'

export default {
  name: 'index',
  components:{
    echart2_1,
    echart2_2,
    echart2_3,
    echart2_4,
    echart2_5,
  },
  props:{
    dataList2: Array,
    model: {
      type: Boolean,
      default: false
    },
    wrapperHeight: Number,
    panelWight: Number,
  },
  data() {
    return {
      baseUrl: process.env.VUE_APP_BASE_API,
      data1:null,
      data2:null,
      data3:null,
    }
  },
  created() {
    this.$nextTick(()=>{
      if(this.$refs.echart2_1)this.$refs.echart2_1.initEcharts1(this.dataList2[0].mapMarksRankings)
      if(this.$refs.echart2_2)this.$refs.echart2_2.initEcharts1(this.dataList2[1].mapMarksRankings)
      if(this.$refs.echart2_3)this.$refs.echart2_3.initEcharts1(this.dataList2[2].mapMarksRankings)
      if(this.$refs.echart2_4)this.$refs.echart2_4.initEcharts1(this.dataList2[3].mapMarksRankings)
      if(this.$refs.echart2_5)this.$refs.echart2_5.initEcharts1(this.dataList2[4].mapMarksRankings)
    })
  },
  mounted() {
    setTimeout(()=>{
      this.initSwiper()
    },100)
  },
  methods:{
    initSwiper(){
      this.swiper = new Swiper(this.$refs.swiperContainer, {
        autoplay: {
          delay: 3000,
          disableOnInteraction: false,
        },
        observer: true,
        observeParents: true,//修改swiper的父元素时，自动初始化swiper
        pagination: {
          el: '.swiper-pagination',
          dynamicBullets: true,
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
      })
      this.$nextTick(()=>{
        this.swiper.init()
      })

    },
  }

}
</script>
<style>
.el-carousel__container{
  height:  100%!important;
}
</style>
<style scoped lang="scss">

.swiper-container{
  width: 100%;
  height: 100%;
  img{
    width: 100%;
    height: 100%;
  }
  .titleRank{
    text-align: center;
    color: #fff;
  }
  .img1{
    height: 100%;
  }
}
.no-data{
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  p{
    color: #fff;
    font-size: 0.28rem;
    font-weight: 400;
  }
  img{
    width: 40% !important;
    height: auto !important;
  }
}
</style>
